<template>
	<div class="order">
		<van-tabs v-model="tabActive" sticky swipeable>
			<van-tab animated v-for="(item, index) in tabList" :key="index" :title="item.title">
				<van-pull-refresh v-model="item.isLoading" @refresh="onRefresh(item)" ref="refresh">
					<van-list
						v-model="item.loading"
						:finished="item.finished"
						:error.sync="item.error"
						finished-text="没有更多了"
						ref="list"
						@load="onLoad(item, true)"
					>
						<transition-group name="van-fade">
							<recordItem v-for="(record, index) in item.goodsList" :item="record" :key="index"></recordItem>
						</transition-group>

						<van-skeleton
							v-for="i in 3"
							:key="'i' + i"
							:row-width="['100%', '40%', '60%', '30%']"
							avatar
							avatar-size="120px"
							avatar-shape="square"
							:row="4"
							:loading="item.loading"
						></van-skeleton>

						<div slot="error">
							<Empty :src="emptyImg" offsetTop="117" emptyText="暂无提现记录~"></Empty>
						</div>
					</van-list>
				</van-pull-refresh>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
import { Tab, Tabs, Skeleton } from 'vant';
import recordItem from './components/record-item';
import Empty from '../../components/Empty.vue';
import refresh from '../../utils/mixin/refresh';
export default {
	name: 'member-order',
	components: {
		'van-tabs': Tabs,
		'van-tab': Tab,
		'van-skeleton': Skeleton,
		recordItem,
		Empty
	},
	data() {
		return {
			tabActive: 0,
			tabList: [
				{
					name: '全部'
				},
				{
					name: '审核中'
				},
				{
					name: '已通过'
				},
				{
					name: '已提现'
				},
				{
					name: '已驳回'
				},
				{
					name: '提现失败'
				}
			],
			emptyImg: require('../../assets/images/member/empty-member.png'),
			params: {
				type: 0,
				status: ''
			}
		};
	},
	mixins: [refresh],
	created() {
		// 为tab数据添加上商品列表数据
		this.tabList = this.tabList.map((e, index) => {
			return {
				title: e.name,
				loading: false,
				finished: false,
				error: false,
				goodsList: [],
				isLoading: false,
				page: 1,
				index
			};
		});
		// 设置请求服务
		this.service = this.$service.member.withdraw.page;
		// 混入tab 切换时需要执行的参数
		this.mixinParamsFn = (item, r) => {
			if (item.index == 1) {
				this.params.status = 0;
			} else if (item.index == 2) {
				this.params.status = 1;
			} else if (item.index == 3) {
				this.params.status = 3;
			} else if (item.index == 4) {
				this.params.status = 2;
			} else if (item.index == 5) {
				this.params.status = 4;
			} else {
				delete this.params.status;
			}
			r(this.params);
		};
	}
};
</script>

<style lang="scss" scoped>
.order {
	/* prettier-ignore */
	font-size: 14PX;
}
.van-list {
	min-height: 60vh;
}
/*.van-pull-refresh {*/
/*min-height: 80vh;*/
/*}*/
.van-skeleton {
	background: $color-white;
	padding: 20px;
	.van-skeleton__content {
		padding-top: 0;
		@include flexBox(space-between, null, column);
		.van-skeleton__row {
			border-radius: 8px;
		}
	}
	.van-skeleton__avatar {
		border-radius: 16px;
	}
}
</style>
